<template>
	<view class="content">
		<!-- 确认支付弹窗 -->
		<uni-popup :show="type === 'trans'" position="middle" mode="fixed" @hidePopup="togglePopup('')" style="position: relative;">
			<view class="uni-tip">
				<text class="uni-tip-content">输入安全密码</text>
				<view style="padding:0 20upx 40upx 20upx;font-size: 30upx;color: #333;text-align: center;">
					<input type="password" placeholder="请输入安全密码" v-model="safeword">
				</view>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button" @click="togglePopup('')" style="border-right: 1px solid #eee;">取消</text>
					<text class="uni-tip-button" @click="transoil()">确定</text>
				</view>
			</view>
		</uni-popup>
		<view class="pageHeader">
			我的油卡
			<a class="generalBack" @click="backpage()" hover-class="none">
				<image src="/static/b-1.png" style="width: 18upx;height: 30upx;"></image>
			</a>
		</view>
		<view class="navbar">
			<view v-for="(navitem, index) in navList" :key="index" class="nav-item" :class="{current: tabCurrentIndex === index}"
			 @click="tabClick(index)">
				{{navitem.text}}
			</view>
		</view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData('page')">
					<view v-if="tabItem.loaded === true && tabItem.orderList.length === 0" class="empty">
						<image src="/static/empty.png" mode="widthFix"></image>
						<view class="empty-tips">
							暂无数据~
						</view>
					</view>
					<view v-for="(item,index) in tabItem.orderList" :key="index" class="order-item">
						<view style="display: flex;justify-content: space-between;padding-bottom: 10upx;border-bottom: 2upx solid #eee;padding: 20upx 10upx;">
							<view style="font-size: 24upx;color: #666;">卡号:{{item.card_number}}
								<text style="padding:0 40upx;color: #1D84E8;" @click="copy(item.card_number)">复制</text>
							</view>
						</view>
						<view style="display: flex;align-items: center;position: relative;padding-top: 10upx;">
							<image :src="item.images" style="width: 168upx;height: 168upx;border-radius: 6upx;margin-right: 20upx;"></image>
							<view style="display: flex;flex-direction: column;justify-content: space-between;flex:1;font-size: 28upx;color: #333;position: relative;">
								<view class="goods-info">
									价格：<text style="color: #EC6104;">￥{{item.price}} </text>
								</view>
								<view style="font-size: 28upx;font-weight: 500;margin-top:10upx;">
									油量：<text style="color: #1D84E8;">{{item.oil_number}}L</text>
								</view>
								<view style="color: #999;font-size:24upx;margin-top:10upx;">
									生成时间：{{item.addtime}}
								</view>
								<view style="color: #999;font-size:24upx;margin-top:10upx;">
									生效时间：{{item.addtime}}
								</view>
								<view style="color: #333;font-size:24upx;margin-top:10upx;">
									油卡状态：<text style="color: #1D84E8;">{{item.status_msg}}</text>
								</view>
								<view v-if="tabCurrentIndex==0&&item.assignment=='0'" class="chexiao" @click="trans_prop(item)">转让</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import postAjax from '../../API/postAjax.js'
	import * as util from '../../common/util.js'
	import uniLoadMore from '@/components/uni-load-more.vue'
	import uniPopup from '../../components/uni-popup/uni-popup.vue'
	export default {
		data() {
			return {
				userToken: '',
				tabCurrentIndex: 0,
				oilobj:{},// 选中的油卡
				safeword:null,
				type:'',
				// 我的订单列表
				// 加载的属性
				loadingType: 0,
				// 弹窗
				type: '',
				page_total: '',
				pageindex: 0,
				current: '',
				// 是否有数据
				flag: false,
			
				navList: [{
						state: '0',
						text: '待使用',
						orderList: [],
						loadingType: 'more'
					},
					{
						state: '1',
						text: '转让中',
						orderList: [],
						loadingType: 'more',
					},
					{
						state:'2，3，4',
						text: '已完成',
						orderList: [],
						loadingType: 'more',
					}
				],
			}
		},

		components: {
			uniLoadMore,
			uniPopup
		},
		onLoad(options) {
			let that = this
			that.userToken = uni.getStorageSync('token')
			that.loadData()
		},
		methods: {
			togglePopup(type) {
				this.type = type;
			},
			backpage() {
				uni.navigateBack({
					delta: 1
				});
			},
			trans_prop(i){
				this.oilobj = i
				this.type = 'trans'
			},
			transoil(){
				let that = this
				if(!that.safeword){
					uni.showToast({
						title: '请输入安全密码',
						icon: 'none'
					})
					return
				}
				postAjax('Oilcard/OilCardTransfer',{
					token:that.userToken,
					id:that.oilobj.id,
					paypwd:that.safeword
				},function(data){
					if(data.code==0){
						uni.showToast({
							title: '转让成功',
							icon: 'none'
						})
						setTimeout(() => {
							let list = that.navList[0].orderList;
							let secondList = that.navList[0].orderList;
							let index = list.findIndex(val => val.id === that.oilobj.id);
							let secondindex = secondList.findIndex(item => item.id === that.oilobj.id);
							index !== -1 && list.splice(index, 1);
							if(secondindex1==-1){
								that.oilobj.status_msg = '转让中'
								secondList.push(that.oilobj)
							}
						}, 300)
					}else{
						uni.showToast({
							title: '转让失败，请稍后重试',
							icon: 'none'
						})
					}
					that.safeword = ''
					that.type = ''
				})
			},
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				});
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let that = this
				let index = that.tabCurrentIndex;
				let navItem = that.navList[index];
				let state = navItem.state;
				let postdata = {}
				if (source === 'tabChange' && navItem.loaded === true) {
					//tab切换只有第一次需要加载数据
					// that.pageindex=1
					that.pageindex = navItem.loadindex
					return;
				}
				if (source === 'tabChange' && navItem.loaded !== true) {
					that.pageindex = 0
				}
				if (navItem.loadingType === 'loading') {
					//防止重复加载
					return;
				}
				if (source === 'page') {
					// that.pageindex++
				}
				postdata = {
					token: that.userToken,
					m: that.pageindex,
					n:10,
					status: state
				}
				
				navItem.loadingType = 'loading';
				// 我的订单列表
				let myorderList = []
				// 获取的订单数据
				postAjax('Oilcard/MyOilCard', postdata, function(data) {
					if (data.code == 0) {
						myorderList = data.data
						if (myorderList.length > 0) {
							myorderList.forEach(item => {
								navItem.orderList.push(item);
							})
							if (navItem.orderList.length > 4) {
								navItem.loadingType = 'more';

							} else {
								navItem.loadingType = 'nodata';
								// that.pageindex--
							}
							that.pageindex++
							that.$set(navItem, 'loadindex', that.pageindex);
						}else {
							navItem.loadingType = 'noMore';
						}
						if(navItem.orderList.length==0){
							navItem.loadingType = 'nodata';
						}
						that.$set(navItem, 'loaded', true);
					}
				})
			},
		}
	}
</script>

<style>
	.content {
		height: 100vh;
		background-color: #F9F9F9;
	}
	.chexiao{
		padding: 8upx 40upx;background-color: #EC6104;color: #fff;font-size: 28upx;position: absolute;bottom:10upx;right:20upx;border-radius: 10upx;
	}
	.swiper-box {
		height: calc(100% - 194px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.uni-swiper-item {
		height: auto;
	}

	.default-opbtn {
		width: 180upx;
		height: 60upx;
		line-height: 54upx;
		text-align: center;
		font-size: 30upx;
		background: none;
		display: inline-block;
	}
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		margin-top: -10vh;
		align-items: center;
	
	}
	
	.empty image {
		width:240upx;
		margin-bottom: 30upx;
	}
	.empty-tips {
		display: flex;
		font-size: 30upx;
		color: #666;
	
	}
	.tuibtn {
		height: 60upx;
		line-height: 54upx;
		text-align: left;
		font-size: 28upx;
		background: none;
		display: inline-block;
		padding: 0 16upx;
	}

	.default-opbtn::after,
	.tuibtn::after {
		border: none;
	}

	.goods-totalmsg {
		padding: 18upx 32upx 26upx 32upx;
		display: flex;
		justify-content: space-between;
		color: #666;
		font-size: 28upx;
	}

	.goods-info {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.order-item {
		display: flex;
		flex-direction: column;
		margin:0 30upx 30upx;
		overflow-y: auto;
		background-color: #fff;
		border-radius: 20upx;
		font-size: 28upx;
		padding-bottom: 10upx;
		color: #333;
	}

	.goods-box-single {
		display: flex;
		justify-content: space-between;
	}

	.pageHeader {
		position: relative;
		height: 64px;
		background-color: #1D84E8;
		line-height: 64px;
		text-align: center;
		font-size: 36upx;
		color: #fff;
		padding-top: 20px;
	}

	.generalBack {
		position: absolute;
		top: 40upx;
		left: 30upx
	}

	.regoodbox {
		padding: 22upx 30upx;
		background-color: #fff;
		display: flex;
	}

	.navbar {
		display: flex;
		height: 80upx;
		color: #999;
		padding: 0 10upx;
		background: #fff;
		/* box-shadow: 0 2px 5px rgba(0,0,0,.06); */
		position: relative;
		z-index: 10;
		margin-bottom: 30upx;
	}

	.nav-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		font-size: 28upx;
		color: #303133;
		position: relative;
	}

	.current {
		color: #EC6104;
	}

	.current:after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		width: 54upx;
		height: 0;
		border-bottom: 2px solid #EC6104;
	}

	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		padding: 15px 0;
		width: 300px;
		background-color: #fff;
		border-radius: 10px;
	}

	.uni-tip-title {
		margin-bottom: 10px;
		text-align: center;
		font-weight: bold;
		font-size: 16px;
		color: #333;
	}

	.uni-tip-content {
		padding: 20px 0;
		text-align: center;
		font-size: 16px;
		color: #666;
	}

	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding-top: 15px;
		border-top: 1px solid #eee
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #3b4144;
	}
</style>
